<template>
  <div>
    <BasicModal width="80%"
                v-bind="$attrs"
                @register="registerModal"
                :title="title"
                :showOkBtn="false"
                :showCancelBtn="false">
      <div class="export-btn">
        <a-button type="primary"
                  @click="handleExport">导出</a-button>
      </div>
      <table width="100%"
             height="50"
             border="1"
             cellspacing="0"
             cellpadding="0"
             style="border-collapse: collapse;">
        <tr height="60"
            style="text-align: center;">
          <td>姓名</td>
          <td>电话</td>
          <td>邮箱</td>
          <td>备注</td>
        </tr>
        <tr height="60"
            style="text-align: center;"
            v-for="(item,index) in dataLsit"
            :key="item.id">
          <td>{{item.name}}</td>
          <td>{{item.phone}}</td>
          <td>{{item.email}}</td>
          <td>{{item.remark}}</td>
        </tr>
        <p style="fons-size:20px">合计：{{dateType}}人</p>
      </table>
      <!-- <template #insertFooter>
        <a-button type="primary"
                  danger>点我更新内容</a-button>
      </template> -->
    </BasicModal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { Description, useDescription } from '/@/components/Description/index';
import { DetailsApi, ApplyExportApi } from '/@/api/activityAdmin/index';
import { downloadByData } from '/@/utils/file/download';
export default defineComponent({
  name: 'mod',
  components: {
    BasicModal,
    Description,
  },
  emits: ['success'],
  setup() {
    const mockData = ref({});
    const dataLsit = ref<any>([]);
    const dateType = ref<number>(2);
    let title = ref<string>('');
    let id = ref<number>();
    const [registerModal, { closeModal }] = useModalInner(async (data) => {
      mockData.value = {};
      id.value = data.record.id;
      const detail = await DetailsApi(data.record.id);
      mockData.value = { ...detail.data };
      dataLsit.value = mockData._rawValue;
      dateType.value = data.record.number;
      title.value = `${data.record.title}-报名详情`;
    });
    const [register] = useDescription({
      data: mockData,
      column: 2,
      // schema: schema,
    });

    async function handleSubmit() {
      console.log('确认事件', mockData);
      closeModal();
    }
    // 导出
    async function handleExport() {
      const res = await ApplyExportApi({ id: id.value });
      downloadByData(res.data, title.value,'application/vnd.ms-excel');
    }
    return {
      registerModal,
      register,
      closeModal,
      handleSubmit,
      dataLsit,
      dateType,
      // schema,
      title,
      handleExport,
    };
  },
});
</script>
<style  lang="less" scoped>
table tr td {
  width: 20%;
  border: 1px solid #999;
  &:nth-child(4) {
    width: 40%;
  }
}
.export-btn {
  margin-bottom: 5px;
  text-align: right;
}
.ant-modal {
  position: relative;
}
.ant-modal-body {
  margin: 5% 0 0 18%;
}
</style>
